<template>
  <a-col :span="12">
    <a-tabs v-model:active-key="active">
      <a-tab-pane
        v-for="(item, index) in rightData.matches"
        :tab="
          item.website_code +
          '-' +
          item.category_name +
          ':' +
          item.condition_name
        "
        :key="index"
      >
        <!-- @vue-ignore -->
        <table-data
          v-bind="$attrs"
          :currentActive="item"
          :mitt="mitt"
        ></table-data>
      </a-tab-pane>
    </a-tabs>
  </a-col>
</template>

<script lang="tsx" setup>
import { Emitter } from 'mitt';
import { Condition } from '../../type';
import tableData from './tableData.vue';

const props = defineProps<{
  rightData: Condition;
  mitt: Emitter<any>;
}>();
const active = ref(0);
watchEffect(
  () => {
    const { website_code, category_code, condition_name } =
      props.rightData.matches[active.value] || {};
    const key = website_code + category_code + condition_name;
    props.mitt.emit('changeKey', key);
  },
  {
    flush: 'post',
  },
);
</script>
